
//找到edit元素
let edit = document.getElementsByClassName('edit');
console.log(edit);
for (let i = 0; i < edit.length; i++) {

    edit[i].onclick = function (e) {

        //获得单价
        let price = this.parentNode.previousElementSibling.innerHTML
        price = parseFloat(price.substring(1)) //截取下标从1开始到最后的字符
        //获得- +属性
        let op = this.getAttribute('data-op')//获取指定标签属性的值
        let num
        if (op === '+') {
            //当点击为 + 号时 找到数字
            num = parseInt(this.previousElementSibling.innerHTML)
            num++
            this.previousElementSibling.innerHTML = num
        } else if (op === '-') {
            num = parseInt(this.nextElementSibling.innerHTML)
            num--
            if (num === 0) {
                alert('商品数量必须大于0')
                num = 1
            }
            this.nextElementSibling.innerHTML = num
        }

        let sumprice = '$' + (num * price).toFixed(1)
        this.parentNode.nextElementSibling.innerHTML = sumprice;

        calcPrice()
        calcNums()
    }

}

//this指的是当前调用函数的对象

//计算总价并显示
function calcPrice() {
    let sum = document.getElementsByClassName('sum-price');
    let a = 0;
    for (let i = 0; i < sum.length; i++) {
        //找到选择框
        let parent = sum[i].parentNode;
        let target = parent.firstElementChild.firstElementChild.checked
        //判断选择况是否选中
        if (target) {
            let str = sum[i].innerHTML;
            str = parseFloat(str.substring(1))
            a += str;
        }
    }
    //toFixed(1) 保留一位小数
    all.innerHTML = '$' + a.toFixed(1) + '元';

}
calcPrice()

//计算商品总数
function calcNums() {
    //找到数量
    let goodsNum = document.getElementsByClassName('goods-num');
    let sum = 0;
    for (let i = 0; i < goodsNum.length; i++) {
        let parent = goodsNum[i].parentNode.parentNode
        let target = parent.firstElementChild.firstElementChild.checked
        let h = target.checked
        console.log(target);
        if (target) {

            let num = parseInt(goodsNum[i].innerHTML)
            sum += num;
        }
    }
    let c = document.querySelector('.two');
    c.innerHTML = sum;
}
calcNums()
//实现全选全不选
function selectAll() {
    let all = document.getElementsByClassName('allselect');
    console.log(all);
    //给每个全选绑定change事件
    for (let i = 0; i < all.length; i++) {
        all[i].onchange = function () {
            let flag = all[i].checked;
            console.log(flag);
            //找到所有的class='select'的checkbox
            let select = document.getElementsByClassName('select');
            for (let j = 0; j < select.length; j++) {
                select[j].checked = flag;
            }
            //计算总数
            calcNums()
            //计算总价
            calcPrice()
        }
    }
}
selectAll()

//当select全部选中时，all才选中，否则不选中
function selectReverse() {
    //找到所有的select选择框
    let select = document.getElementsByClassName('select')
    //找到全选框
    let all = document.getElementsByClassName('allselect')
    for (let j = 0; j < select.length; j++) {
        select[j].onclick = function () {
            //flag=true 说明所有的select都是选中的，false至少有一个没选择
            let flag = true
            for (let i = 0; i < select.length; i++) {
                //判断select中有没有false
                if (select[i].checked === false) {
                    flag = false
                    break
                }
            }
            //让全选框变成true
            for (let i = 0; i < all.length; i++) {
                all[i].checked = flag
            }
            calcNums()
            calcPrice()
        }
    }
}
selectReverse()

// * 序号 名称 单价 数量 小计
//* 1    *** **** ***  ***
// * 2    *** **** ***  ***
// * 3    *** **** ***  ***
// * 4    *** **** ***  ***

function buy() {
    //名称
    let arrName = document.getElementsByClassName('bookName')
    //单价
    let arrPrice = document.getElementsByClassName('price-wrap')
    //数量
    let arrNum = document.getElementsByClassName('goods-num')
    //小计
    let arrSumPrice = document.getElementsByClassName('sum-price')
    //商品的总数量
    let totalNum = document.querySelector('.two').innerHTML
    //商品的总价格
    let totalPrice = parseFloat(document.querySelector('#all').innerHTML.substring(1))
    let str = `<table width="50%" border=1 cellspacing=0>`
    str += `<tr>
        <th>序号</th><th >名称</th><th>单价</th><th>数量</th><th>小计</th>
      </tr>`
    for (let i = 0; i < arrName.length; i++) {
        let tr = `<tr>
        <td align="center">${i + 1}</td>
        <td align="center">${arrName[i].innerHTML}</td>
        <td align="center">${arrPrice[i].innerHTML}</td>
        <td align="center">${arrNum[i].innerHTML}</td>
        <td align="center">${arrSumPrice[i].innerHTML}</td>
      </tr>`
        str += tr
    }
    str += `<tr><td colspan="5">购物总数：${totalNum}</td></tr>`
    str += `<tr><td colspan="5">购物总金额：${totalPrice}</td></tr>`
    str += `<tr><td colspan="5">商品折扣：${(totalPrice * 0.15).toFixed(1)}</td></tr>`
    str += `<tr><td colspan="5">应支付：${(totalPrice * 0.85).toFixed(1)}</td></tr>`
    str += '</table>'
    //找到buy-info div部分 下标为0
    let buy = document.getElementsByClassName('buy-info')[0]
    buy.style.display = 'block'
    buy.innerHTML = str
}

function del() {
    let del = document.getElementsByClassName('del');
    for (let i = 0; i < del.length; i++) {
        del[i].onclick = function () {
            let par = document.querySelector('.container');
            let shang = document.getElementsByClassName('goods-wrap')[0];
            par.removeChild(shang);

            calcPrice()
            calcNums()
        }

    }

}
del()